<template>
    <view>
        <NavBar :title="'申请人信息'" />
        <scroll-view scroll-y="true" class="scroll-Y">
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">车牌号</text>
                    <text class="icon">*</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.name" />
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">车牌颜色</text>
                    <text class="icon">*</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.idCard" />
            </view>
            <view class="uni-form-item uni-column" @click="eduShow = true">
                <view class="title">
                    <text class="content">车辆类型</text>
                    <text class="icon">*</text>
                </view>
                <view class="input-row">
                    <text class="input-value">{{ form.education || '请选择' }}</text>
                    <u-icon name="arrow-right" size="22"></u-icon>
                </view>
            </view>
            <view class="uni-form-item uni-column" @click="timeShow = true">
                <view class="title">
                    <text class="content">行驶证初领日期</text>
                    <text class="icon">*</text>
                </view>
                <view class="input-row">
                    <text class="input-value">{{ form.time || '请选择' }}</text>
                    <u-icon name="calendar" size="22"></u-icon>
                </view>
            </view>
            <view class="uni-form-item uni-column" @click="eduShow = true">
                <view class="title">
                    <text class="content">燃料类型</text>
                    <text class="icon">*</text>
                </view>
                <view class="input-row">
                    <text class="input-value">{{ form.education || '请选择' }}</text>
                    <u-icon name="arrow-right" size="22"></u-icon>
                </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">厂牌</text>
                    <text class="icon">*</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.phone" />
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">型号</text>
                    <text class="icon">*</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.phone" />
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">车辆识别码</text>
                    <text class="icon">*</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.phone" />
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">发动机号码</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.phone" />
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">发动机型号</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.phone" />
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">发动机功率（kw）</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.phone" />
            </view>
            <view class="uni-form-item uni-column" @click="timeShow = true">
                <view class="title">
                    <text class="content">出厂日期</text>
                    <text class="icon">*</text>
                </view>
                <view class="input-row">
                    <text class="input-value">{{ form.time || '请选择' }}</text>
                    <u-icon name="calendar" size="22"></u-icon>
                </view>
            </view>
            <view class="uni-form-item uni-column" @click="timeShow = true">
                <view class="title">
                    <text class="content">登记证登记日期</text>
                    <text class="icon">*</text>
                </view>
                <view class="input-row">
                    <text class="input-value">{{ form.time || '请选择' }}</text>
                    <u-icon name="calendar" size="22"></u-icon>
                </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">车身颜色</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.phone" />
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">核定载人数</text>
                    <text class="icon">*</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.phone" />
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">车轴数（个）</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.phone" />
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">轴距（mm)</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.phone" />
            </view>
            <view class="uni-form-item uni-column">
                <view class="title">
                    <text class="content">车辆长度（mm)</text>
                </view>
                <input type="text" placeholder="请输入" v-model="form.phone" />
            </view>
            <u-action-sheet
                :show="eduShow"
                :actions="eduList"
                title="请选择"
                @close="eduShow = false"
                @select="eduSelect"
            />
            <u-datetime-picker
                :show="timeShow"
                v-model="value1"
                mode="date"
                @cancel="timeShow = false"
                @confirm="timeSelect"
                :formatter="formatter"
            ></u-datetime-picker>
        </scroll-view>
        <view class="but">
            <view class="submit" @click="submitClick">提交</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            form: {
                name: ''
            },
            eduShow: false,
            timeShow: false,
            eduList: [{ name: '小学' }, { name: '初中' }, { name: '高中' }, { name: '本科' }, { name: '研究生' }],
            value1: Number(new Date())
        };
    },
    methods: {
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`;
            }
            if (type === 'month') {
                return `${value}月`;
            }
            if (type === 'day') {
                return `${value}日`;
            }
            return value;
        },
        // 提交表单
        submitClick() {
            console.log('提交表单');
            this.$u.toast('提交成功');
            this.$u.route({
                url: '/pages/fromTable/transport/index'
            });
        },
        eduSelect(e) {
            this.form.education = e.name;
            this.eduShow = false;
        },
        timeSelect() {
            this.form.time = this.value1;
            this.timeShow = false;
        }
    }
};
</script>

<style lang="scss" scoped>
.scroll-Y {
    width: 100%;
    padding: 46rpx 0;
    height: calc(100vh - 369rpx);
    background-color: #fff;
    font-family: PingFang SC, PingFang SC;
    .uni-column {
        font-weight: 400;
        font-size: 31rpx !important;
        color: rgba(0, 0, 0, 0.8);
        padding: 15rpx 0;
        width: 90%;
        margin: 0 auto;
        border-bottom: 1rpx solid #d0d3d6;
    }
    .title {
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        .icon {
            font-weight: 400;
            font-size: 27rpx;
            color: #dc0000;
            margin-left: 8rpx;
        }
        .content {
            font-weight: 400;
            font-size: 27rpx;
            color: rgba(0, 0, 0, 0.6);
        }
    }
    .disability-list {
        margin-top: 10rpx;
        display: flex;
        flex-direction: column;
        gap: 18rpx;
    }
}
.but {
    padding-top: 15rpx;
    background-color: #ffffff;
    border-top: 1rpx solid #d0d3d6;
    .submit {
        margin: 0 auto;
        width: 688rpx;
        height: 92rpx;
        background: #2c5e9f;
        border-radius: 8rpx;
        font-weight: 400;
        font-size: 29rpx;
        color: #ffffff;
        line-height: 92rpx;
        text-align: center;
    }
}
.input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60rpx;
    font-size: 32rpx;
    color: #333;
}
.input-value {
    color: grey;
    flex: 1;
}
</style>
